<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title>Example: Browser Detection with &#x60;UA&#x60;</title>
    <link rel="stylesheet" href="http://yui.yahooapis.com/3.4.0pr3/build/cssgrids/grids-min.css">
    <link rel="stylesheet" href="../assets/css/main.css">
    <link rel="stylesheet" href="../assets/vendor/prettify/prettify-min.css">
    <script src="../../build/yui/yui-min.js"></script>
</head>
<body>

<div id="doc">
    <h1>Example: Browser Detection with &#x60;UA&#x60;</h1>

    
        <a href="#toc" class="jump">Jump to Table of Contents</a>
    

    <div class="yui3-g">
        <div id="main" class="yui3-u">
            <div class="content"><div class="intro">
<p>This example demonstrates how to access YUI's built-in user-agent
information to learn things about the environment in which your code
is running.  This includes information like what browser, version, and
operating system are being used; it also includes context information
like whether you're code is running on a mobile browser, running in a
secure page, or running under Adobe Air or Google Caja.</p>  

<p><strong>Note:</strong> We strongly recommend using feature
detection rather than user-agent sniffing to fork code. Fork on the
user-agent information only when absolutely necessary to do so (for 
example, in cases where browsers do not report their own capabilities
accurately).</p>
</div>

<div class="example">
    <pre style="margin-bottom: 1em">
UA properties set for your browser:
</pre>
<div id="demo">
</div>

<script type="text/javascript">

// This method is in the core of the library, so we don't have to use() any
// additional modules to access it.  However, this example requires 'node'.
YUI().use('node', function(Y) {
    var results = Y.one('#demo'), ua = '', platform = '';

    Y.each(Y.UA, function(v, k) {
        var info = k + ': ' + v;
        results.append('<p>' + info + '</p>');

        if (v) {
            if (Y.Lang.isNumber(v)) {
                ua = info;
            } else {
                platform = v;
            }
        }
    });

    results.append('<p>Your browser is ' + ua + ', ' + platform + '</p>');
});

</script>


</div>

<h3 id="first-a-word-of-caution">First, a word of caution</h3>

<p><strong>Please DO NOT use this in place of feature detection</strong>.
Though many browsers have known JavaScript implementation quirks, it is bad
practice and unsafe coding to make the assumption that because the page is being
viewed in browser X that you can rely on feature Y being available.  Check for
feature Y if you need it.</p>

<p>Browser sniffing is an imprecise science, and relies on many things in the
browser environment to be just right.  Though many techniques are very
accurate, 100% accuracy can't be guaranteed.</p>

<p>Use the <code>UA</code> object to inform you of what browser your
page is being viewed in, but avoid using this technique unless feature detection
will not serve your purpose.</p>

<h3 id="what-ua-looks-like">What UA looks like</h3>

<p><code>UA</code> is an object literal containing keys for most major user
agents.  The key corresponding to the current browser is assigned a version
number.  All others have value 0, with the exception of the <code>mobile</code>
property, which is a string value indicating the name of a supported mobile 
device that was detected or null.</p>

<pre class="code prettyprint">if (Y.UA.gecko &gt; 0) {}  &#x2F;&#x2F; e.g. Firefox
if (Y.UA.ie &gt; 0) {}     &#x2F;&#x2F; Microsoft Internet Explorer

&#x2F;&#x2F; Or leverage boolean coercion -- 0 evaluates as false
if (Y.UA.opera) {}  &#x2F;&#x2F; Opera
if (Y.UA.webkit) {} &#x2F;&#x2F; Safari, Webkit</pre>


<p>There's more information on the <code>UA</code> object and value
ranges in the API Documentation.</p>

<h3 id="instantiate-yui">Instantiate YUI</h3>

<pre class="code prettyprint">YUI().use(&#x27;node&#x27;, function(Y) {
    &#x2F;&#x2F; This method is in the core of the library, so we don&#x27;t have to use() any
    &#x2F;&#x2F; additional modules to access it.  However, this example requires &#x27;node&#x27;.</pre>


<h3 id="user-agent-info">User Agent Info</h3>
<p>In this simple example, we use the <code>each</code> to iterate the <code>UA</code> object.</p>

<pre class="code prettyprint">var results = Y.one(&#x27;#demo&#x27;), ua = &#x27;&#x27;, platform = &#x27;&#x27;;

Y.each(Y.UA, function(v, k) {
    var info = k + &#x27;: &#x27; + v;
    results.append(&#x27;&lt;p&gt;&#x27; + info + &#x27;&lt;&#x2F;p&gt;&#x27;);

    if (v) {
        if (Y.Lang.isNumber(v)) {
            ua = info;
        } else {
            platform = v;
        }
    }
});

results.append(&#x27;&lt;p&gt;Your browser is &#x27; + ua + &#x27;, &#x27; + platform + &#x27;&lt;&#x2F;p&gt;&#x27;);</pre>

</div>
        </div>

        <div id="sidebar" class="yui3-u">
            
                <div id="toc" class="sidebox">
                    <div class="hd">
                        <h2 class="no-toc">Table of Contents</h2>
                    </div>

                    <div class="bd">
                        <ul class="toc">
<li>
<a href="#first-a-word-of-caution">First, a word of caution</a>
</li>
<li>
<a href="#what-ua-looks-like">What UA looks like</a>
</li>
<li>
<a href="#instantiate-yui">Instantiate YUI</a>
</li>
<li>
<a href="#user-agent-info">User Agent Info</a>
</li>
</ul>
                    </div>
                </div>
            

            
                <div class="sidebox">
                    <div class="hd">
                        <h2 class="no-toc">Examples</h2>
                    </div>

                    <div class="bd">
                        <ul class="examples">
                            
                                
                                    <li data-description="Setting up a YUI Instance">
                                        <a href="yui-core.html">YUI Core</a>
                                    </li>
                                
                            
                                
                                    <li data-description="Working with multiple YUI instances.">
                                        <a href="yui-multi.html">Multiple Instances</a>
                                    </li>
                                
                            
                                
                                    <li data-description="On-demand loading of YUI and non-YUI assets">
                                        <a href="yui-loader-ext.html">YUI Loader - Dynamically Adding YUI and External Modules</a>
                                    </li>
                                
                            
                                
                                    <li data-description="Create Class Hierarchies with &#x60;extend&#x60;">
                                        <a href="yui-extend.html">Create Class Hierarchies with &#x60;extend&#x60;</a>
                                    </li>
                                
                            
                                
                                    <li data-description="Creating a composition-based class structure using &#x60;augment&#x60;">
                                        <a href="yui-augment.html">Compose Classes of Objects with &#x60;augment&#x60;</a>
                                    </li>
                                
                            
                                
                                    <li data-description="Add behaviors to objects or static classes with &#x60;mix&#x60;">
                                        <a href="yui-mix.html">Add Behaviors to Objects with &#x60;mix&#x60;</a>
                                    </li>
                                
                            
                                
                                    <li data-description="Combine data sets and create shallow copies of objects with &#x60;merge&#x60;">
                                        <a href="yui-merge.html">Combine Data Sets with &#x60;merge&#x60;</a>
                                    </li>
                                
                            
                                
                                    <li data-description="Check data types with the &#x60;Lang Utilities&#x60;">
                                        <a href="yui-isa.html">Check Data Types with &#x60;Lang&#x60;</a>
                                    </li>
                                
                            
                                
                                    <li data-description="Get information about the current user agent with &#x60;UA&#x60;">
                                        <a href="yui-ua.html">Browser Detection with &#x60;UA&#x60;</a>
                                    </li>
                                
                            
                                
                                    <li data-description="Working with YUI 2 in 3">
                                        <a href="yui-yui2.html">Working with YUI 2 in 3</a>
                                    </li>
                                
                            
                                
                                    <li data-description="Natively use YUI Gallery Modules">
                                        <a href="yui-gallery.html">Natively use YUI Gallery Modules</a>
                                    </li>
                                
                            
                        </ul>
                    </div>
                </div>
            

            
        </div>
    </div>
</div>

<script src="../assets/vendor/prettify/prettify-min.js"></script>
<script>prettyPrint();</script>

</body>
</html>
